<template>
    <view class="dialog" :class="{'dc':type == 'center'}" @touchmove.prevent>
	   <view class="dialogBox" :class="{'dialogTop':type == 'top'}" v-if="tradePasswordType == 2">
            <view class="titlePop">请支付兑换费用</view>
            <view class="closeItem" @click="close">X</view>
            <view class="moneyBox">
                <!-- <view class="money">
                    <text>现金：</text>
                    <text>1111</text>
                </view> -->
                <view class="integral">
                    <view class="intLable">
                        <image src="@/static/my/shenye_icon1.png" mode=""></image>
                        <text class="num">{{consumption}}</text>
                        <text>通分</text>
                    </view>
                    <text class="currMoney">手续费：{{payPoundage}}通分</text>
                </view>
            </view>
            <view class="digbtnBox" v-if="type == 'center'" >
                <view class="btn" @click="pay">确认支付</view>
            </view>
		</view>
		<view class="dialogBox" :class="{'dialogTop':type == 'top'}" v-if="tradePasswordType == 1">
			<view class="coding_box">
				<view class="title"></view>
				<view class="closeItem" @click="close">X</view>
				<view class="coding_box_item coding_box_item_no">
					您还未设置积分交易密码请先前往设置
				</view>
				<view class="but_no" @click="setPassword">
					设置交易密码
				</view>
			</view>
		</view>
		<view class="password_box" v-if="type == 'top'">
			 <view class="password_title">输入6位交易密码</view>
			 <view class="password_num">
				 <view class="password_zi" v-for="(item, index) in 6"><view :class="{'passwordOn':password[index]}"></view></view>
			 </view>
			 <view class="digital_keyboard" >
				 <view class="keyboard_kuagn" v-for="(el,elindex) in numberBox">
					<view class="otherbg" v-if="el.id == 10"></view>
					<view class="delete" v-else-if="el.id == 12" @tap="deleteNum(el)"></view>
					<view v-else class="keyboard_num" @tap="clickNum(el)">{{el.num}} </view>
				 </view>
			 </view>
			 <view style="width: 100%;height: 50rpx; "></view>
		</view>
    </view>
</template>

<script>
	import { getCustomerAmount } from '@/api/api-v1-2.js'
    export default {
        props: {
            // 通分
			consumption: {
			    type: String,
			    value : '0'
			},
            // 手续费
            payPoundage: {
                type: Number,
                value : 0
            },
        },
        data() {
            return {
                numberBox:[
                	{id:1,num:'1'},
                	{id:2,num:'2'},
                	{id:3,num:'3'},
                	{id:4,num:'4'},
                	{id:5,num:'5'},
                	{id:6,num:'6'},
                	{id:7,num:'7'},
                	{id:8,num:'8'},
                	{id:9,num:'9'},
                	{id:10,num:''},
                	{id:11,num:'0'},
                	{id:12,num:''},
                ],
				password:'', // 所输入的密码
				type:'center', //判断密码框输入位置
				num:0, // coco 输入数量
				tradePasswordType:null, //判断是否设置密码
				usable:0  ,//coco 余额
				clickStatus:true //防重复点击
            }
        },
        created(e) {
			this.getCustomer()
			this.getCustomerAmount()
			
        },
        methods: {

			// 判断coco 余额
			async getCustomerAmount(){
				var res = await getCustomerAmount()
				this.usable = res.result.usable
			},
			// 判断 是否设置密码
			async getCustomer(){
				var res = await this.$api.getCustomer()
				this.tradePasswordType = res.data.tradePasswordType
			},
			// 支付判断
			pay(){
                
                if(this.clickStatus){
                    this.clickStatus = false
                	this.type = 'top'
                }
                setTimeout(()=>{
                	this.clickStatus = true
                },1000)
			},
			// 关闭窗口
			close(){
				 this.$emit('close')
			},
			// 设置密码
			setPassword(){
				uni.navigateTo({
					url:'/pages/my/set-up/transaction-password/password-settings/password-settings?step=1&match=1'
				})
			},
			// 完成交易密码输入事件
		   clickNum(key){
				if (this.password.length < 6) {
					this.password += key.num
					if (this.password.length === 6) {
						// 密码验证操作
						var data = {
							password:this.password
						}
						this.$emit('determine',data)
						// console.log(this.password,'37')
						// this.$.open('/trait/details');
					}
				}

		  },
		  // 删除交易密码
		  deleteNum(){
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1)
				}
		  },
        }
    }
</script>

<style scoped>
	.dialog{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.6);
	}
	.dc{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
    .dialogBox{
        width: 630rpx;
        border-radius: 20rpx;
        position: relative;
        z-index: 999;
        background: #fff;

    }
	.dialogTop{
		margin: 0 auto;
		margin-top: 80rpx;
	}
	/* 弹窗组件 */
	.coding_box{
		   padding-bottom: 60rpx;
		   position: relative;
	}
	.closeItem{
		   width: 40rpx;
		   height: 40rpx;
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   position: absolute;
		   right:20rpx;
		   top: 20rpx;
	}
	.coding_box .title{
	    width: 85%;
	    margin: 0 auto;
	    text-align: center;
	    padding-top: 60rpx;
	    font-size: 36rpx;
	    color: #222222;
	    font-weight: 500;
	}
	.coding_box_item{
		   display: flex;
		   flex-direction: row;
		   align-items: center;
		   justify-content: center;
		   width: 100%;
		   margin-top: 86rpx;
	}
	.coding_box_item .numberBox{
		   text-align: center;
		   color: #222222;
		   font-size: 44rpx;
		   width: 140rpx;
		   border-bottom: 2rpx solid #A7A7A7;
	}
	.numberBox input,.coding_box_item .numberBox text{
		width: 100%;
		font-size: 44rpx;
	}
	.coding_box_item image{
		   width: 40rpx;
		   height: 40rpx;
		   margin-right: 12rpx;
	}
	.coding_box_item text{
		   font-size: 36rpx;
		   color: #222222;
		  
	}
	.coding_box_item .custom{
		   color: #1D46ED;
		   font-size: 30rpx;
		   margin-left: 28rpx;
	}
	.coding_balance{
		   width: 100%;
		   margin-top: 42rpx;
		   color: #555555;
		   font-size: 30rpx;
		   text-align: center;
	}
	.coding_but{
		   width: 370rpx;
		   height: 92rpx;
		   background: linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);
		   border-radius: 8rpx;
		   margin: 0 auto;
		   font-size: 36rpx;
		   color: #ffffff;
		   line-height: 92rpx;
		   text-align: center;
		   margin-top: 68rpx;
	}
	/*  */
	.password_box{
		   position: absolute;
		   bottom: 0;
		   width: 100%;
		   height: 778rpx;
		   background: #F5F5F6;
	}
	.password_title{
		   background: #ffffff;
		   font-size: 32rpx;
		   color: #222222;
		   width: 100%;
		   text-align: center;
		   padding: 40rpx 0;
	}
	.password_num{
		   background: #ffffff;
		   width: 100%;
		   display: flex;
		   flex-direction: row;
		   align-items: center;
		   justify-content: center;
		   
	}
	.password_zi:first-child{
		    border-left: 2rpx solid #A5A8BB;
	}
	.password_zi{
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   width: 116rpx;
		   height: 116rpx;
		   border-top: 2rpx solid #A5A8BB;
		   border-bottom: 2rpx solid #A5A8BB;
		   border-right: 2rpx solid #A5A8BB;
	}
	.passwordOn{
		   width: 28rpx;
		   height: 28rpx;
		   border-radius: 50%;
		   background: #222222;
	}
	
	.digital_keyboard{
		   width: 100%;
		   display: flex;
		   flex-wrap: wrap;
		   padding-top: 60rpx;
		   background: #ffffff;
	}
	.keyboard_kuagn{
		   font-size: 56rpx;
		   color: #030303;
		   width: 248rpx;
		   height: 108rpx;
		   background: #fff;
	
		   border-top: 2rpx solid #F5F5F6;
		   border-right: 2rpx solid #F5F5F6;
		  /* border-bottom: 2rpx solid #F5F5F6; */
	}
	
	.delete{
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   width: 100%;
		   height: 100%;
		   background: #F5F5F6 url('/static/index/activity/delete.png') no-repeat;
		   background-size: 100% 100%;
	}
	.otherbg{
		   width: 100%;
		   height: 100%;
		   background: #F5F5F6;
	}
	.keyboard_num{
		   width: 100%;
		   height: 100%;
		   display: flex;
		   align-items: center;
		   justify-content: center;
	}
	.keyboard_num:active{
		background: rgba(0, 0, 0, 0.1);
	}
    /* news add */
    .coding_box_item_no{
    	width: 100%;
    	box-sizing: border-box;
    	padding: 0 100rpx;
    	font-size: 36rpx;
    	font-weight: 600;
    	text-align: center;
    }
    .but_no{
    	padding: 15rpx 0;
    	text-align: center;
    	width: 300rpx;
    	margin: 30rpx auto;
    	background: #6F00FC;
    	color: #fff;
    	font-size: 32rpx;
    	border-radius: 16rpx;
    }
    .titlePop {
        width: 85%;
        margin: 0 auto;
        text-align: center;
        padding-top: 40rpx;
        font-size: 36rpx;
        color: #333;
        font-weight: 500;
    }
    
    .moneyBox {
        margin-top: 54rpx;
        padding-bottom: 40rpx;
    }
    
    .moneyBox .money {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .moneyBox .money text:nth-child(1) {
        font-size: 36rpx;
        color: #222;
    }
    
    .moneyBox .money text:nth-child(2) {
        font-size: 56rpx;
        color: #FF3A3A;
    }
    
    .moneyBox .integral {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .moneyBox .integral .intLable {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    
    .moneyBox .integral .intLable image {
        width: 44rpx;
        height: 44rpx;
    }
    
    .moneyBox .integral .intLable text {
        font-size: 40rpx;
        color: #222;
        margin-left: 10rpx;
        color: #FF3A3A;
    }
    
    .moneyBox .integral .intLable .num {
        font-size: 56rpx;
        color: #FF3A3A;
        font-weight: 700;
    }
    
    .moneyBox .integral .currMoney {
        font-size: 28rpx;
        color: #898989;
        margin-top: 16rpx;
    }
    
    .digbtnBox {
        display: flex;
        justify-content: center;
        margin-top: 40rpx;
        width: 100%;
    }
    
    .digbtnBox .btn {
        width: 370rpx;
        height: 92rpx;
        text-align: center;
        line-height: 92rpx;
        background: #FF4219;
        border-radius: 8rpx;
        margin-bottom: 40rpx;
        color: #fff;
    }
</style>
